<template>
  <div class="personal">
    <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div id="J_chartLineBox" style="min-height: 100px">
              <div class="item_bock head_p" @click="uploadImageHandle()">
                   <div class="head_img">
                     <img :src="this.dataForm.avatar" />
                   </div>
                   <upload-image v-if="uploadImageVisible" ref="uploadImage" @refreshDataList="dataFormSelect"></upload-image>
                   <el-button type="primary" @click="uploadImageHandle()" >点击更换头像</el-button>
                 </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="24">
          <el-card>
            <div id="J_chartBarBox" class="chart-box">
              <p class="part-title" style="margin-top: 5px;">个人基本信息</p>
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormEdit()" label-width="80px">
                  <el-form-item label="账号" prop="account">
                    <el-input v-model="dataForm.account" disabled ></el-input>
                  </el-form-item>
                  <el-form-item label="用户名" prop="adminName">
                    <el-input v-model="dataForm.adminName" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="genderName">
                    <el-radio-group v-model="dataForm.genderName" :disabled = "disabled">
                          <el-radio label="男"></el-radio>
                          <el-radio label="女"></el-radio>
                        </el-radio-group>
                  </el-form-item>
                  <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="dataForm.mobile" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="dataForm.email" :readonly="readonly"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="学校" prop="school">
                    <el-input v-model="dataForm.school" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="学院" prop="college">
                    <el-input v-model="dataForm.college" :readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="专业" prop="profession">
                    <el-input v-model="dataForm.profession" :readonly="readonly"></el-input>
                  </el-form-item> -->
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary"  size="mini" @click="dataFormEdit()" v-bind:class="{ 'isShow': isShow }">编辑</el-button>
                  <el-button type="success"  size="mini" @click="dataFormSave()" v-bind:class="{ 'isShow': !isShow }">保存</el-button>
                  <el-button @click="cancel()" plain size="mini" v-bind:class="{ 'isShow': !isShow }">取消</el-button>
                </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>

<script>
  /* eslint-disable */
  import { isEmail, isMobile } from '@/utils/validate'
  import UploadImage from '../../compont/upload-image.vue'

  export default {
    data () {
      var validateEmail = (rule, value, callback) => {
        if (!isEmail(value)) {
          callback(new Error('邮箱格式错误'))
        } else {
          callback()
        }
      }
      var validateMobile = (rule, value, callback) => {
        if (!isMobile(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      return {
        isShow: false,
        readonly: true,
        disabled: true,
        uploadImageVisible: false,
        dataForm: {
          account: '',
          adminName: '',
          genderName: false,
          mobile: '',
          email: '',
          school: '',
          college: '',
          profession: '',
          avatar: ''
        },
        dataRule: {
          adminName: [
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ],
          school: [
            { required: true, message: '学校不能为空', trigger: 'blur' }
          ],
          college: [
            { required: true, message: '学院不能为空', trigger: 'blur' }
          ],
          profession: [
            { required: true, message: '专业不能为空', trigger: 'blur' }
          ],
          // email: [
          //   { validator: validateEmail, trigger: 'blur' }
          // ],
          // mobile: [
          //   { validator: validateMobile, trigger: 'blur' }
          // ]
        }
      }
    },
    created() {
      this.dataFormSelect()
    },
    components: {
      UploadImage
    },
    computed: {
      id: {
        get () { return this.$store.state.user.id },
        set (val) { this.$store.commit('user/updateId', val) }
      },
      account: {
        get () { return this.$store.state.user.account },
        set (val) { this.$store.commit('user/updateAccount', val) }
      },
      avatar: {
        get () { return this.$store.state.user.avatar },
        set (val) { this.$store.commit('user/updateAvatar', val) }
      }
    },
    methods: {
      // 查询
      dataFormSelect () {
        this.$http({
          url: this.$http.adornUrl('/admin/getAdminInfo'),
          method: 'get'
        }).then(({data}) => {
          if (data.success) {
            this.dataForm = data.data
            if(this.dataForm.avatar == undefined || this.dataForm.avatar == "" || this.dataForm.avatar == null){
              this.dataForm.avatar = this.avatar
            }else{
              this.$store.commit('user/updateAvatar', this.dataForm.avatar)
               this.dataForm.avatar = this.dataForm.avatar
            }
          } else {
            this.$message.error(data.message)
          }
        })
      },
      dataFormEdit () {
        this.isShow = !this.isShow
        this.readonly = !this.readonly
        this.disabled = !this.disabled
      },
      cancel () {
        this.isShow = !this.isShow
        this.readonly = !this.readonly
        this.disabled = !this.disabled
      },
      uploadImageHandle () {
        this.uploadImageVisible = true
        this.$nextTick(() => {
          this.$refs.uploadImage.init()
        })
      },
      // 表单提交
      dataFormSave () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/admin/editAdminInfo'),
              method: 'post',
              data: this.$http.adornData({
                'id': this.id,
                'userName': this.dataForm.userName,
                'gender': this.dataForm.genderName == "男" ? 1 : 2,
                'phone': this.dataForm.phone,
                'email': this.dataForm.email,
                'school': this.dataForm.school,
                'college': this.dataForm.college,
                'profession': this.dataForm.profession
              })
            }).then(({data}) => {
              if (data.success) {
                this.$message({
                  message: '数据保存成功!',
                  type: 'success'
               });
               this.isShow = !this.isShow
               this.readonly = !this.readonly
               this.disabled = !this.disabled
              } else {
                this.$message.error(data.message)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .personal {
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
    .info {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .isShow {
    	display: none;
    }
    .item_bock {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height:94px;
      width: 300px;
      padding:0px 24px 0px 38px;
      border-bottom: 1px solid #f7f7f7;
      background: #fff;
    }
    .head_p {
      height:132px;
    }
    .head_img{
      height: 90px;
    }
    .head_img img{
      width:90px;
      height:90px;
      border-radius:50px
    }
    .account {
      font-size: 16px;
      margin-left: 50px;
    }
  }
    .el-button--primary {
        color: #fff;
        background-color: #273471 !important;
        border-color: #273471 !important;
    }
      .part-title {
          margin: 20px 0;
          color: #000;
          padding-left: 1em;
          font-size: 16px;
          position: relative;
          display: inline-block;
          width: 100%;
      }
      .part-title:before{
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        width: 3px;
        height: 1em;
        background-color: #4976e8;
      }

</style>
